<template>
	<view>




		<view class="margin">
			<view class=""> </view>
			<view class="bg1 mt10 pd10">
				<h3>收件人信息</h3>
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<!-- :rules="rules" -->
				<u--form labelPosition="left" :model="form" ref="form1">
					<u-row>
						<u-col :span="12">
							<view class="demo-layout">
								<u-form-item label="姓名" prop="form.consignee" borderBottom ref="item1">
									<u--input v-model="form.consignee" border="none"></u--input>
								</u-form-item>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col :span="12">
							<view class="demo-layout">
								<view class="phone">
									<u-form-item label="手机号" prop="form.phone" borderBottom ref="item1">
										<u--input v-model="form.phone" border="none"></u--input>
									</u-form-item>
								</view>
							</view>
						</u-col>
					</u-row>

					<u-row>
						<u-col>
							<view class="demo-layout">
								<view class="detailAddress">
									<u-form-item label="地址" prop="form.address" borderBottom ref="item1">
										<u--input v-model="form.address" border="none"></u--input>
									</u-form-item>
								</view>
							</view>
						</u-col>
					</u-row>

					<u-row>
						<u-col>
							<view class="flexflex flex-align flex-end">
								<u-icon name="map" color="#7976e9"></u-icon>
								<view class="size_10" @click="getGps"> 定位 </view>
							</view>
						</u-col>

						<!-- 						<u-col :span="10">
							<view class="demo-layout bg-purple">
								<view class="area">
									<u-form-item label="省市区" prop="userInfo.name" borderBottom ref="item1">
										<u--input v-model="model1.userInfo.name" border="none"></u--input>
									</u-form-item>
								</view>
							</view>
						</u-col> -->
					</u-row>
				</u--form>
			</view>

			<!--  -->
			<view class="bg2 mt10">
				<view class="">
					<view class="pd10">
						<view class="flex ms17">
							<h3 class="size_16">智能填写</h3>
							<view v-if="false" class="size_14"> 识别 </view>
						</view>
						<!-- 							<u--textarea disabled placeholder="粘贴地址信息，可自动识别并填写" v-model="model1.intro" count>
						</u--textarea> -->
						<view class="bg_f9">
							<auto-parse-address boxClass="c-box" @result="result"></auto-parse-address>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="" style="margin-top: 200rpx">
				<view class="btn flex-cen" @click="saveAddress">
					<!-- @click="$pub.go('/pages/addAddress/addAddress')" -->
					<view class="size_16 color_white"> 保存 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		telVerification,
		xtIdVerification,
	} from "@/utils/myFun.js";
	export default {
		data() {
			return {
				change: 0,
				/* new */
				form: {
					address: "",
					consignee: "",
					phone: "",
				},
				rules: {
					"form.consignee": {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					"form.phone": {
						type: "string",
						required: true,
						message: "请填写手机",
						trigger: ["blur", "change"],
					},
					"form.address": {
						type: "string",
						required: true,
						message: "请填写地址",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// this.$refs.form1.setRules(this.rules)
			this.$refs.form1.setRules(this.rules)
		},
		onLoad(options) {
			if (options.data) {
				let data = JSON.parse(decodeURIComponent(options.data));
				if (data) {
					this.form = data;
				}
				let change = options.change;

				this.change = change;
				console.log(data, "data");
				console.log(change, "change");
			}
		},
		onShow() {},
		methods: {
			async saveAddress() {
				let {
					address,
					consignee,
					phone
				} = this.form
				if (consignee == '' || consignee == null || consignee == undefined) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空",
					});
					return
				}
				if (address == '' || address == null || address == undefined) {
					uni.showToast({
						icon: 'none',
						title: "地址不能为空",
					});
					return
				}
				if (!telVerification(phone)) {
					uni.showToast({
						icon: 'none',
						title: "请填写正确的手机号",
					});
					return
				}
				if (this.change == 1) {
					console.log("修改");
					let re = await this.$API.addressApi.changeList(this.form);
					uni.showToast({
						title: "修改成功",
					});
					uni.navigateBack();
					return;
				}

				let re = await this.$API.addressApi.addList(this.form);
				console.log(re, "data");
				uni.showToast({
					title: "添加成功",
				});
				uni.navigateBack();
			},
			result(e) {
				/* 
				 王路13077274575北京市朝阳区xx路姚家园x楼x单元3305上官飞雪15000000000
				 "address": "",
				 "consignee": "",
				 "phone": ""
				 */
				console.log(e);
				let {
					name,
					phone,
					detail
				} = e;
				this.form.consignee = name;
				this.form.phone = phone;
				this.form.address = detail;
				/**
				 * @params e: { province: '', name: '', city: '', area: '', detail: '', phone: '', postalCode: '' }
				 *
				 * */
			},
			getGps(e) {
				let that = this;
				console.log(111, "locations");
				uni.getSystemInfo({
					success(res) {
						console.log("判断手机定位服务是否授权:", res);
						let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
						if (locationEnabled == false) {
							//手机定位服务（GPS）未授权
							uni.showToast({
								title: "请打开手机GPS",
								icon: "none",
							});
						} else {
							uni.chooseLocation({
								success: function(res) {
									console.log("位置名称：" + res.name);
									// this.dizhi = res.name
									// that.activityInfo.uaddress = res.address
									// that.activityInfo.ulatitude = res.latitude
									// that.activityInfo.ulongitude = res.longitude
									that.form.address = res.address;
									console.log("详细地址：" + res.address);
									console.log("纬度：" + res.latitude);
									console.log("经度：" + res.longitude);
								},
							});
						}
					},
				});
			},

			sexSelect(e) {
				this.model1.userInfo.sex = e.name;
				this.$refs.form1.validateField("userInfo.sex");
			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f9f9ff;
	}

	.demo-layout {
		// height: 86rpx;
	}

	/* 深度选择器 */

	.demo-layout .phone ::v-deep.u-form-item__body__left {
		width: 130rpx !important;
	}

	.demo-layout .area ::v-deep.u-form-item__body__left {
		width: 130rpx !important;
	}

	.demo-layout .detailAddress ::v-deep.u-form-item__body__left {
		width: 130rpx !important;
	}

	/* bg */
	.bg1 {
		// width: 690rpx;
		height: 378rpx;
		background: #ffffff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}

	.bg2 {
		// width: 690rpx;
		height: 432rpx;
		background: #ffffff;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}

	/* 按钮 */
	.btn {
		// width: 690rpx;
		height: 104rpx;
		background: #7976e9;
		border-radius: 52rpx 52rpx 52rpx 52rpx;
		opacity: 1;
	}
</style>